<template>
  <div class="i18n-setting">
    <el-dropdown style="color: white;" @command="handleCommand">
      <span class="el-dropdown-link">
        <svg-icon class="icon" fill="white" icon-class="language" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="lang==='zh'" command="zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled="lang==='en'" command="en">English</el-dropdown-item>      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'I18nSetting',
  data() {
    return {
      lang: localStorage.getItem('lang') || 'zh'
    }
  },
  methods: {
    handleCommand(cmd) {
      this.lang = cmd
      this.$i18n.locale = cmd
      localStorage.setItem('lang', cmd)
      // 切换完了后刷新页面 --- 饿了么ui要改掉语言必须刷新
      location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.i18n-setting {
  margin-right: 10px;
  .el-dropdown {
    line-height: 0;
  }
  .icon {
    font-size: 22px;
  }
}
</style>
